import React, { Component } from 'react';
import style from './Dictionary/Dictionary.scss';
import appStyle from '../style.scss';
import { login } from '../actions/userAction';

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: undefined,
      password: undefined,
      showLogin: false,
    }

    this.hideLogin = this.hideLogin.bind(this);
  }

  componentDidMount() {
    this.props.getInstance && this.props.getInstance(this.refs.loginModal);
    window.addEventListener('click', this.hideLogin);
  }

  componentWillUnmount() {
    window.removeEventListener('click', this.hideLogin)
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.handleSubmit(this.state.username, this.state.password);
    // e.preventDefault();
  }

  hideLogin(e) {
    console.log('hideLogin', e.target, this.refs.loginDom, this.state.loginModalVisible);

    // if (this.refs.loginDom && !this.refs.loginDom.contains(e.target)) {
    //   console.log('hide');
    //   this.setState({
    //     loginModalVisible: false,
    //   })
    // }
  }

  checkLogin() {
    this.setState({
      loginModalVisible: true,
    });
    return new Promise((resolve => {
      this.checkLoginResolve = resolve;
    }))
  }

  showLogin(showLogin = true) {
    this.setState({
      showLogin,
    })
  }

  render() {
    return (
      <div ref="loginModal" className={appStyle.modal2}>
        <div className={style.login}>
          <div className={style.header}>登录</div>
          <form className={style.loginBox} onSubmit={this.handleSubmit.bind(this)}>
            <div className={style.loginInputBox}>
              <span className="iconfont icon-denglu-copy"/>
              <input type="text" value={this.state.username} placeholder="用户名" onInput={(e) => this.setState({ username: e.target.value })}/>
            </div>
            <div className={style.loginInputBox}>
              <span className="iconfont icon-mimayaochi"/>
              <input type="password" value={this.state.password} placeholder="密码" onInput={(e) => this.setState({ password: e.target.value })}/>
            </div>
            <input onClick={this.handleSubmit.bind(this)} className={style.submitBtn} type="submit"/>
          </form>
        </div>
      </div>
    )
  }
}

export default Login;
